<template>
  <div class="page">
    <van-search
        v-model="search"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch">
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <div class="search-list">
      <van-list
          v-model="loading"
          offset="10"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad">
        <div v-for="(item,index) in dataList" class="search-item">
          <van-cell>
            <template #icon>
              <van-image width="2rem"
                         height="2rem"
                         class="img"
                         fit="cover"
                         :src="item.image"></van-image>
            </template>
            <template #title>
              <div class="elip text-bold"
                   v-html="$utils.string.replace(
                       item.title,
                       search,
                       `<span class='text-main'>${search}</span>` )">
              </div>
              <div class="elip text-gray">{{ item.desc }}</div>
              <div class="elip text-gray">{{ item.createTime }}</div>
            </template>
          </van-cell>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script type="es6">
import {indexList} from "@/api";

export default {
  name: "",
  inject: ['reload'],
  components: {},
  data() {
    return {
      loading: false, //是否处于加载状态
      finished: false, //是否已加载完成，加载完成后不再触发load事件
      search: "ok-mini",
      page: 1,
      count: 1,
      dataList: [],
    };
  },
  mounted() {

  },
  methods: {
    async onLoad() {
      this.loading = true;
      let page = this.page;
      let res = await indexList({page});

      this.loading = false;
      if (200 == res.code) {
        this.finished = page++ >= res.count;
        this.page = page;
        this.dataList = this.dataList.concat(res.data);
      } else {
        this.finished = true;
      }

    },
    onSearch(e) {
      if (!this.loading) {
        this.page = 1;
        this.dataList = [];
        this.onLoad();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.search-list {
  padding: 15px;
  height: calc(100vh - 55px);
  overflow-y: auto;

  .search-item {
    padding-bottom: 15px;

    ::v-deep {
      .van-cell {
        border-radius: 10px;
        overflow: hidden;
      }

      .van-cell__title {
        overflow: hidden;
      }
    }

    .img {
      border-radius: 5px;
      overflow: hidden;
      margin-right: 10px;
    }
  }
}

</style>